<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宝宝-圣诞树</title>
    <style>
        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden; /* 防止滚动条出现 */
        }

        #main {
            position: fixed;
            top: 0;
            left: 0;
        }

        #video1 {
            width: 100%;
            height: 100%;
			z-index: 1;
        }

        .hidden {
            display: none;
        }

        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .centered-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            color: white;
            font-size: 24px;
        }

        #header {
            text-align: center;
            color: #C89568;
            font-family: Times New Roman;
            font-size: 35px;
            min-width: 400px;
            max-height: 100vh;
        }

        /* 模态框的样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 100; /* 确保模态框在最上层 */
            left: 38%;
            top: 10%;
            width: auto;
            height: auto;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }

        /* 模态框内容的样式 */
        .modal-content {
            position: relative;
            /* top: 50%;
            left: 50%; */
            transform: translate(-50%, -50%);
            z-index: 101; /* 确保内容在模态框之上 */
            border: 1px solid #888;
        }

        /* 模态框中的图片样式 */
        .img {
            width: 350px;
            height: auto;
            object-fit: contain;
            cursor: pointer; /* 鼠标悬停时显示指针 */
        }

        .close {
            color: #aaa;
            float: left;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer; /* 鼠标悬停时显示指针 */
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body id="app">
    <!-- 其他链接 -->
    
    <div id="main">
        <video id="video1" muted="muted" autoplay="autoplay" loop="loop" src="./video/chrismas.mp4"></video>
        <div class="centered-text">
			<h1 id="header">
                <p class="header-item show">宝宝</p>
                <p class="header-item show">🛷⛄🎅	𝑴𝒆𝒓𝒓𝒚 𝑪𝒉𝒓𝒊𝒔𝒕𝒎𝒂𝒔 🎄🎁✨</p>
                <p class="header-item show">圣诞是冬的来信，而你是我的惊喜</p>
                <button id="myBtn" class="header-item show" style="font-size: 50px;border: none; background: transparent;" onclick="email()">✉️</button>
            </h1>
        </div>
        <!-- 来信 -->
        <div id="myModal" class="modal">
            <!-- <div class="modal-content"> -->
                <img src="./email1.png" class="img" id="overlayImg"/>
            <!-- </div> -->
        </div>

		<audio id="audio_music" muted="muted" autoplay="autoplay" loop="loop" src="./1.m4a">
			<source type="audio/mpeg">
			<!-- 您的浏览器不支持播放音乐 -->
		</audio>
    </div>
</body>
<script type="text/javascript">
    var video = document.getElementById("video1");
    video.playbackRate *= 0.8;
    video.play();

</script>
<script>
    // 获取模态框元素
    var modal = document.getElementById("myModal");

    // 获取打开模态框的按钮元素
    var btn = document.getElementById("myBtn");

    // 获取图片元素
    var img = document.getElementById("overlayImg");

    // 点击按钮打开模态框
    btn.onclick = function() {
        modal.style.display = "block";
		playMusic();
    }

    // 点击图片关闭模态框
    img.onclick = function() {
        modal.style.display = "none";
    }

    // 点击模态框外部，关闭模态框
    modal.onclick = function(event) {
        if (event.target !== img) { // 确保点击图片本身不关闭模态框
            modal.style.display = "none";
        }
    }



// 播放音乐
function playMusic() {
   if (music.paused) {
	   music.play();
   } else {
	   music.pause();
   }
}
</script>
</html>